<template>
  <div class="demand-preview-wrap">
    <div class="demand-preview-table-box">

      <table class="demand-table-box">
        <thead class="demand-table-text">岗位要求</thead>
        <tr>
          <td>性别年龄</td>
          <td v-html="sexAge"></td>
        </tr>
        <tr>
          <td>纹身染发</td>
          <td v-html="tattooHair"></td>
        </tr>
        <tr>
          <td>体检</td>
          <td v-html="medicalFee"></td>
        </tr>
        <tr>
          <td>视力</td>
          <td v-html="vision"></td>
        </tr>
        <tr>
          <td>文化技能</td>
          <td v-html="culturalSkills"></td>
        </tr>
        <tr>
          <td>民族</td>
          <td v-html="nation"></td>
        </tr>
        <tr>
          <td>身份证</td>
          <td v-html="idCard"></td>
        </tr>
        <tr>
          <td>其他要求</td>
          <td v-html="postOther"></td>
        </tr>

        <thead class="demand-table-text">薪资福利</thead>
        <tr v-if="postType == 0">
          <td>底薪说明</td>
          <td v-html="workingPrice"></td>
        </tr>
        <tr v-if="postType == 0">
          <td>加班费说明</td>
          <td v-html="overtimeDetails"></td>
        </tr>
        <tr v-if="postType == 1">
          <td>工价</td>
          <td v-html="hoursPrice"></td>
        </tr>
        <tr>
          <td>补贴说明</td>
          <td v-html="subsidyDetails"></td>
        </tr>
        <tr>
          <td>发薪时间</td>
          <td v-html="payrollTime"></td>
        </tr>
        <tr>
          <td>其他说明</td>
          <td v-html="salaryOther"></td>
        </tr>

        <thead class="demand-table-text">食宿条件</thead>
        <tr>
          <td>住宿</td>
          <td v-html="accConditions"></td>
        </tr>
        <tr>
          <td>饮食</td>
          <td v-html="diet"></td>
        </tr>
        <tr>
          <td>其他说明</td>
          <td v-html="accOther"></td>
        </tr>

        <thead class="demand-table-text">工作时间</thead>
        <tr>
          <td>工作制</td>
          <td v-html="workSystem"></td>
        </tr>
        <tr>
          <td>班次时间</td>
          <td v-html="shiftTime"></td>
        </tr>
        <tr>
          <td>其他说明</td>
          <td v-html="workOther"></td>
        </tr>

        <thead class="demand-table-text">面试资料</thead>
        <tr>
          <td>面试资料</td>
          <td v-html="interviewData"></td>
        </tr>
        <tr>
          <td>其他说明</td>
          <td v-html="interviewOther"></td>
        </tr>
      </table>
    </div>

    <div class="save-box">
      <button type="button" class="edit-btn" @click="backEdit">返回修改</button>
      <button type="button" class="save-btn" @click="saveDemand">保存</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id: this.$route.query.id,
        sexAge: "",  //性别年龄
        tattooHair: "",  //纹身染发
        medicalFee: "",  //体检
        vision: "",  //视力
        culturalSkills: "",  //文化技能
        nation: "",  //民族
        idCard: "",  //身份证
        postOther: "", //岗位其他要求
        workingPrice: "",  //底薪说明
        hoursPrice: "",//工价
        overtimeDetails: "", //加班费说明
        subsidyDetails: "",  //补贴说明
        payrollTime: "", //发薪时间
        salaryOther: "", //薪资福利其他说明
        accConditions: "", //住宿
        diet: "", //饮食
        accOther: "",  //食宿条件其他说明
        workSystem: "",  //工作制度
        shiftTime: "", //班次时间
        workOther: "", //工作时间其他说明
        interviewData: "", //面试资料
        interviewOther: "",  //面试其他说明
        postType: ""
      }
    },
    mounted() {
      this.postType = this.$route.query.postType;
      this.sexAge = this.$route.query.sexAge ? this.$route.query.sexAge : "无";
      this.tattooHair = this.$route.query.tattooHair ? this.$route.query.tattooHair : "无";
      this.medicalFee = this.$route.query.medicalFee ? this.$route.query.medicalFee : "无";
      this.vision = this.$route.query.vision ? this.$route.query.vision : "无";
      this.culturalSkills = this.$route.query.culturalSkills ? this.$route.query.culturalSkills : "无";
      this.nation = this.$route.query.nation ? this.$route.query.nation : "无";
      this.idCard = this.$route.query.idCard ? this.$route.query.idCard : "无";
      this.postOther = this.$route.query.postOther ? this.$route.query.postOther : "无";

      this.workingPrice = this.$route.query.workingPrice ? this.$route.query.workingPrice : "无";
      this.hoursPrice = this.$route.query.hoursPrice ? this.$route.query.hoursPrice : "无";
      this.overtimeDetails = this.$route.query.overtimeDetails ? this.$route.query.overtimeDetails : "无";
      this.subsidyDetails = this.$route.query.subsidyDetails ? this.$route.query.subsidyDetails : "无";
      this.payrollTime = this.$route.query.payrollTime ? this.$route.query.payrollTime : "无";
      this.salaryOther = this.$route.query.salaryOther ? this.$route.query.salaryOther : "无";

      this.accConditions = this.$route.query.accConditions ? this.$route.query.accConditions : "无";
      this.diet = this.$route.query.diet ? this.$route.query.diet : "无";
      this.accOther = this.$route.query.accOther ? this.$route.query.accOther : "无";

      this.workSystem = this.$route.query.workSystem ? this.$route.query.workSystem : "无";
      this.shiftTime = this.$route.query.shiftTime ? this.$route.query.shiftTime : "无";
      this.workOther = this.$route.query.workOther ? this.$route.query.workOther : "无";

      this.interviewData = this.$route.query.interviewData ? this.$route.query.interviewData : "无";
      this.interviewOther = this.$route.query.interviewOther ? this.$route.query.interviewOther : "无";
    },
    methods: {
      backEdit() {
        this.$router.push({
          path: "/workdemand",
          query: {
            "id": this.id,
            "sexAge": this.sexAge,
            "tattooHair": this.tattooHair,
            "medicalFee": this.medicalFee,
            "vision": this.vision,
            "culturalSkills": this.culturalSkills,
            "nation": this.nation,
            "idCard": this.idCard,
            "postOther": this.postOther,
            "workingPrice": this.workingPrice,
            "hoursPrice": this.hoursPrice,
            "overtimeDetails": this.overtimeDetails,
            "subsidyDetails": this.subsidyDetails,
            "payrollTime": this.payrollTime,
            "salaryOther": this.salaryOther,
            "accConditions": this.accConditions,
            "diet": this.diet,
            "accOther": this.accOther,
            "workSystem": this.workSystem,
            "shiftTime": this.shiftTime,
            "workOther": this.workOther,
            "interviewData": this.interviewData,
            "interviewOther": this.interviewOther
          }
        });
      },
      saveDemand() {
        this.$router.push({
          path: "/workedit",
          query: {
            "id": this.id,
            "sexAge": this.sexAge,
            "tattooHair": this.tattooHair,
            "medicalFee": this.medicalFee,
            "vision": this.vision,
            "culturalSkills": this.culturalSkills,
            "nation": this.nation,
            "idCard": this.idCard,
            "postOther": this.postOther,
            "workingPrice": this.workingPrice,
            "hoursPrice": this.hoursPrice,
            "overtimeDetails": this.overtimeDetails,
            "subsidyDetails": this.subsidyDetails,
            "payrollTime": this.payrollTime,
            "salaryOther": this.salaryOther,
            "accConditions": this.accConditions,
            "diet": this.diet,
            "accOther": this.accOther,
            "workSystem": this.workSystem,
            "shiftTime": this.shiftTime,
            "workOther": this.workOther,
            "interviewData": this.interviewData,
            "interviewOther": this.interviewOther
          }
        });
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .demand-preview-wrap
    wh(100%, auto)
    display: flex
    flex-direction: column
    align-items: center
    .demand-preview-table-box
      margin-top: 0.64rem
      margin-bottom: 0.8rem
      wh(93.6%, auto)
      .demand-table-box
        display: flex;
        flex-direction: column
        wh(100%, auto)
        border: 0.027rem solid rgba(235, 235, 235, 1)
        .demand-table-text
          wh(100%, 0.88rem)
          background: rgba(220, 235, 250, 1)
          size-color(0.4rem, #333)
          line-height: 0.88rem
          text-align: center
        tr
          display: flex
          wh(100%, auto)
          size-color(0.347rem, rgba(102, 102, 102, 1))
          &:last-child
            td
              border-bottom: 0 !important
          td
            padding-top: 0.2rem
            padding-bottom: 0.2rem
            vertical-align: middle
            &:nth-child(1)
              display: flex
              align-items: center
              border-right: 0.027rem solid rgba(235, 235, 235, 1)
              border-bottom: 0.027rem solid rgba(235, 235, 235, 1)
              padding-left: 0.32rem
              width: 2.4rem
            &:nth-child(2)
              padding-left: 0.32rem
              padding-right: 0.32rem
              line-height: 0.48rem
              flex: 1
              border-bottom: 0.027rem solid rgba(235, 235, 235, 1)
    .save-box
      fj(center, center)
      padding-bottom: 0.64rem
      wh(100%, 1.28rem)
      .edit-btn
        margin-right: 0.24rem
        wh(4.267rem, 1.28rem)
        line-height: 1.28rem
        background: #fff
        size-color(0.453rem, #3CAFFF)
        border-radius(0.16rem)
        border: 0.027rem solid rgba(60, 175, 255, 1)
      .save-btn
        margin-left: 0.24rem
        wh(4.267rem, 1.28rem)
        line-height: 1.28rem
        background: rgba(60, 175, 255, 1)
        size-color(0.453rem, rgba(255, 255, 255, 1))
        border-radius(0.16rem)
</style>
